<template>
  <div class="list-container">
    <div class="header" header="风险源管理">
      <div>
        <a-button type="primary" v-if="auth.add" @click="gotoView(1, {})">
          新增
        </a-button>
        <a-button v-if="auth.gis" @click="gotoGis()">
          重大风险源GIS地图
        </a-button>
        <a-button v-if="auth.importBSB"> 辨识表中导入 </a-button>
        <a-button v-if="auth.export" @click="exportExcel()">
          检查台账导出
        </a-button>
        <a-button v-if="selectedRows.length > 0" @click="close()">
          风险源关闭
        </a-button>
      </div>
    </div>
    <div class="main" v-loading="loading">
      <vxe-table
        ref="xTable"
        height="99%"
        class="scrollbarStyle"
        align="center"
        show-overflow
        show-header-overflow
        :data="tableData"
        :column-config="{ resizable: true }"
        @checkbox-all="onSelectAll"
        @checkbox-change="onSelect"
      >
        <vxe-column type="checkbox" width="60"></vxe-column>
        <vxe-column type="seq" width="80" title="序号"></vxe-column>
        <vxe-column
          show-overflow
          :key="index"
          :title="item.title"
          :field="item.key"
          :width="item.width"
          v-for="(item, index) in columns"
        >
          <template #default="{ row }">
            <div>{{ row[item.key] }}</div>
          </template>
        </vxe-column>
        <vxe-column
          field="operate"
          width="220"
          title="操作"
          fixed="right"
          align="left"
        >
          <template #default="{ row }">
            <div class="text-button-group">
              <a-button type="link" @click="gotoDetail(row)"> 查看 </a-button>
              <a-button type="link" @click="gotoView(3, row)"> 编辑 </a-button>
              <a-button type="link" class="danger" @click="handleDelClick(row)">
                删除
              </a-button>
            </div>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div class="pager-container">
      <vxe-pager
        background
        :current-page.sync="pager.page"
        :page-size.sync="pager.pageSize"
        :total="pager.total"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
        @page-change="paginationChange"
      >
        <template #left>
          <div class="vxe-pager-left-tip-container">
            第<span>1</span>到<span
              >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
            >共<span>{{ pager.total }}</span
            >条记录
          </div>
        </template>
      </vxe-pager>
    </div>
    <!-- 新增页面 -->
    <customModal :visible.sync="pageVisible" :parameter="parameter">
    </customModal>
    <!-- 详情页面 -->
    <detailsModal
      :visible.sync="detailVisible"
      :parameter="parameter"
    ></detailsModal>
  </div>
</template>

<script>
import customModal from "./components/customModal";
import detailsModal from "./components/detailsModal";
import {
  notificationTip,
  downLoadFileByArraybuffer,
  getNowDateStr,
} from "@/utils";
import { getLoginData } from "@/tools";
import {
  getManageList,
  dangerManageButton,
  getDangerManageDelete,
  getSwitchById,
  downloadDangerManageExcel,
} from "@/api/wisdom-beam/security-app.js";
export default {
  components: {
    customModal,
    detailsModal,
  },
  data() {
    return {
      loading: false,
      columns: [
        {
          title: "危险源名称",
          key: "changeName",
        },
        {
          title: "过程（区域）",
          key: "changeProcess",
        },
        {
          title: "危险等级",
          key: "changeLevelDesc",
        },
        {
          title: "可能导致的结果",
          key: "result",
        },
        {
          title: "检查次数",
          key: "checkNum",
        },
        {
          title: "最近一次检查",
          key: "updateTimeStr",
        },
        {
          title: "危险源状态",
          key: "status",
        },
      ],
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      auth: {
        add: false,
        export: false,
        gis: false,
        importBSB: false,
      },
      //新增
      pageVisible: false,
      detailVisible: false,
      parameter: {},
      selectedRows: [],
    };
  },
  mounted() {
    this.getShowButton();
    this.getTableData();
  },
  methods: {
    //用户手动选择/取消选择某列
    onSelect({ checked }) {
      const records = this.$refs.xTable.getCheckboxRecords();
      this.selectedRows = records;
    },
    //用户手动选择/取消选择所有列
    onSelectAll({ checked }) {
      const records = this.$refs.xTable.getCheckboxRecords();
      this.selectedRows = records;
    },
    //风险源关闭
    close() {
      let that = this;
      const h = this.$createElement;
      this.$confirm({
        title: "您确定关闭所选风险源嘛?",
        content: "",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "#faad14",
          }),
        onOk() {
          let ids = that.selectedRows.map((v) => v.id).toString();
          getSwitchById({
            ids,
            status: "2",
          })
            .then((res) => {
              notificationTip("success", "关闭成功!");
              that.getTableData();
              that.$forceUpdate();
            })
            .catch((_) => {});
        },
        onCancel() {},
      });
    },

    //导出
    exportExcel() {
      let { tenantCode, userId } = getLoginData();
      let {
        conditions: { changeName = "", changeProcess = "", orgCode },
      } = this.$parent.$data;
      downloadDangerManageExcel({
        tenantCode,
        userId,
        zhgdDeptCode: orgCode?.key || "",
        changeName,
        changeProcess,
      })
        .then((data) => {
          downLoadFileByArraybuffer(data, "检查台账" + getNowDateStr());
        })
        .catch((_) => {});
    },

    gotoDetail(row) {
      this.parameter = row;
      this.detailVisible = true;
    },
    gotoView(type, row) {
      this.parameter = {
        operate: type,
        ...row,
      };
      this.pageVisible = true;
    },
    gotoGis() {
      this.$router.push({
        path: "/nebula/wisdom-beam-app/riskSource/map",
      });
    },

    //查询按钮权限
    getShowButton() {
      let {
        conditions: { orgCode },
      } = this.$parent.$data;
      dangerManageButton({ zhgdDeptCode: orgCode?.key || "" })
        .then((res) => {
          let { data } = res;
          this.auth = data?.result || {};
        })
        .catch((_) => {
          this.auth = {};
        });
    },

    //获取表格数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let {
        conditions: { changeName = "", changeProcess = "", orgCode },
      } = this.$parent.$data;
      getManageList({
        zhgdDeptCode: orgCode?.key || "",
        changeName,
        changeProcess,
        page,
        pageSize,
      })
        .then((res) => {
          let { data } = res;
          this.tableData = data?.result?.rows || [];
          this.pager.total = data?.result?.total || 0;
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    //删除
    handleDelClick(row) {
      let dataLength = this.tableData.length;
      let that = this;
      const h = this.$createElement;
      this.$confirm({
        title: "您确定删除所选内容?",
        content: "删除内容后,将无法恢复。",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FB5A5A",
          }),
        onOk() {
          getDangerManageDelete(row.id)
            .then((res) => {
              if (dataLength == 1 && that.pager.page > 1) {
                that.pager.page -= 1;
              }
              notificationTip("success", "删除成功！");
              that.getTableData();
              that.$parent.getStepAreaData();
            })
            .catch();
        },
        onCancel() {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.list-container {
  height: 100%;
  padding-top: 10px;
  .flex();
  flex-direction: column;
  .header {
    padding: 20px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    &::before {
      content: attr(header);
      height: 18px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      line-height: 18px;
    }
  }
  .main {
    flex: 1;
    height: 100%;
    background-color: #fff;
  }
  .pager-container {
    flex-shrink: 0;
    background-color: #fff;
  }
}
</style>
